<template>
    <div class = 'header-wrapper'>
		<div>
			<div class = 'geohey-logo' v-bind:style="backgroundImage" @click = "logoClick"></div>
			<div class="title-container">
				<div class = 'app-title'>{{title}}</div>
				<div class = 'app-subtitle'>{{subTitle}}</div>
			</div>
		</div>
		<input type="checkbox">
		<div class='menu-container'>
			<menu-item v-for = "tool in toolList" 
				:key = "tool.id" 
				:name="tool.name" 
				:icon="tool.icon"
				:id="tool.id"
				:handleClick = "handleSelect"
			></menu-item>
			<el-popover
				v-if="this.store.toolList.length > maxItemCount"
				placement="top-end"
				trigger="hover"
			>
				<menu-item v-for = "tool in toolListMore" 
					:key = "tool.id" 
					:name="tool.name" 
					:icon="tool.icon"
					:id="tool.id"
					:handleClick = "handleSelect"
				></menu-item>
				<menu-item slot="reference"
					name="更多" 
					icon="el-icon-more"
				></menu-item>
			</el-popover>
		</div>
    </div>
</template>

<script>
import BaseWidget from '@/jimu/BaseWidget.js'
import MenuItem from './components/MenuItem'
import { MessageBox,Popover} from 'element-ui';
export default {
	name: 'HeaderWidget',
	mixins:[ BaseWidget ],
	components: {
		'menu-item': MenuItem,
		'el-popover': Popover
	},
	data () {
		return {
			maxItemCount: 4
		}
	},

	created: function () {
	
	},
	computed: {
		menuList: function(){
			return this.store.menuList
		},

		backgroundImage: function(){
			return "background-image:url("+ this.store.appConfig.logo +")"
		},

		title: function(){
			return this.store.appConfig.headerTitle
		},

		subTitle: function(){
			return this.store.appConfig.subTitle
		},

		toolList: function(){
			if(this.store.toolList.length <=  this.maxItemCount){
				return this.store.toolList.filter((tool)=>{
					return tool.groupKey === "menu"
				})
			}else{
				return this.store.toolList.filter((tool,index)=>{
					return tool.groupKey === "menu" && index < (this.maxItemCount-1)
				})
			}
			
		},

		toolListMore: function(){
			return this.store.toolList.filter((tool,index)=>{
				return tool.groupkey === "menu" && index >=  (this.maxItemCount-1)
			})
		},

		

	},
	methods:{
		menuChange: function(key){
			this.bus.$emit(this.event.OPEN_WIDGET, key)
		},
		logoClick: function(){
			window.open(this.store.appConfig.hostUrl);  
		},
		handleSelect: function(index){
			this.bus.$emit(this.event.OPEN_WIDGET, index)
		}
	}
}
</script>

<style lang="scss">
$headerHeight: 65px;
.header-wrapper{
	border-bottom: 1px solid #d4d8db;  
	position: absolute;
	display: flex;
	justify-content: space-between;
	>div:last-child{
		margin-right: 20px;
		min-width:150px;
	}
    .geohey-logo{
		display: inline-block;
		width: 40px;
		height: $headerHeight - 10 ;
		margin-left:20px;
		margin-top:8px;
		background-size: contain;
		background-repeat: no-repeat;
		vertical-align:top;
		cursor: pointer;
	}
	.title-container{
		display: inline-block;
		margin-top: 11px;
	}
    .app-title{
		display: block;
		font-weight: 500;
		font-size:18px;
    	color: #222;
    }
    .app-subtitle{
		display: inline-block;
		color: #777;
		font-size:12px;
	}
	.menu-container{
		height: $headerHeight;
	}
	.el-menu-demo{
		height: $headerHeight - 1;
	}
    .ctrl-btn{
		margin:20px;
	}
	.el-menu--horizontal{
		border: none
	}
	.el-menu--horizontal>.el-menu-item{
		height: $headerHeight - 1;
	}
	.fun-btn-item{
		float:right;
	}
	.logout{
		.icon-signout{
			color:#409eff;
		}
	}
	.logout:hover{
		color:#409eff;
	}
	.menu-icon{
		display: block;
	}
	
}
</style>